import * as loader from './core/loader.js';
import * as THREE from 'three';
import Color from '../Color.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';


class Labels {
    constructor() {
        this.offset = { x: 0, y: 0, z: 0 };
        this.font = null;
    }

    setStaticPath(path) {
        this.staticPath = path;
    }

    setOffset({ x = 0, y = 0, z = 0 } = {}) {
        this.offset = { x, y, z };
    }

    /** by font */
    async appendChild({ text, color, position, offset } = {}) {
        // console.log('Labels.appendChild: ', offset);
        let group = new THREE.Group();
        if (!this.font) {
            let f = `${this.staticPath}/fonts/FZLanTingHei-L-GBK_Regular.json`;
            this.font = await loader.loadFontAsync(f).catch(e => console.error('==> ', e));
        }
        let textGeo = new THREE.TextGeometry(text, {
            font: this.font,
            size: 1,
            height: 0.1
            // curveSegments: 1
        });
        let textMaterial = new THREE.MeshBasicMaterial({ color: Color.rgbToHex(color) });
        let textMesh = new THREE.Mesh(textGeo, textMaterial);

        let x = (position.x + this.offset.x + offset.x) / 1000,
            y = (position.y + this.offset.y + offset.y) / 1000;
        let location = new THREE.Vector3(x, y, 10);
        textMesh.position.copy(location);
        textMesh.rotation.x = Math.PI / 2;
        group.add(textMesh);

        let box = new THREE.Box3();
        box.expandByObject(group);

        // let line = this.drawLine(position, color);
        let line = this.drawLine({ x, y }, color);
        group.add(line);
        return group;
    }
    /** by CSS2DObject */
    async appendChildByString({ text, color, offset, closeFunc } = {}) {
        console.log('Labels.appendClild: ', ...arguments);
        let obj = document.createElement('div');
        obj.className = 'tips';
        // obj.textContent = text;
        obj.innerText = text;
        // obj.style.marginTop = '-1em';
        if (typeof closeFunc === 'function') {
            let icon = document.createElement('i');
            icon.className = 'icon icon-close';
            icon.addEventListener('click', closeFunc);
            obj.appendChild(icon);
        }

        let label = new CSS2DObject(obj);
        label.position.set(offset.x, offset.y, offset.z);
        label.userData.isTips = 1;
        return label;
    }
    drawLine(pos, color) {
        // console.log('===> ', pos);
        let lineGeometry = new THREE.BufferGeometry();
        // let x = (pos.x + this.offset.x) / 1000,
        //     y1 = (pos.y + this.offset.y) / 1000;
        // lineGeometry.vertices.push(new THREE.Vector3(x, y1, 9));
        // lineGeometry.vertices.push(new THREE.Vector3(x, y1, 0));
        lineGeometry.vertices.push(new THREE.Vector3(pos.x, pos.y, 9));
        lineGeometry.vertices.push(new THREE.Vector3(pos.x, pos.y, 0));

        let line = new THREE.Line(
            lineGeometry,
            new THREE.LineDashedMaterial({
                color: Color.rgbToHex(color),
                dashSize: 0.1,
                gapSize: 0.5
            })
        );
        line.computeLineDistances();
        return line;
    }
}

export default Labels;
